<template>
  <div class="bigbox">
    <!-- 左侧盒子 -->
    <div class="leftbox">
      <!-- 树节点检索 -->
      <!-- <el-input
      size="small "
        placeholder="输入关键字搜索"
        v-model="filterText">
      </el-input> -->
      <el-autocomplete
      class="inline-input"
      v-model="filterText"
      style="margin-bottom: 10px;width:100%"
      :fetch-suggestions="querySearch"
      placeholder="输入关键字进行过滤"
      :trigger-on-focus="true"
      value-key="name"
      :debounce='300'
      @select="handleSelect"
    ></el-autocomplete>
      <!-- 树组件 -->
      <div class="treebox">
        <el-tree
          :props="props"
          :load="loadNode"
          :highlight-current="true"
          lazy
          node-key="id"
          :default-expanded-keys="array"
          @node-click="handleNodeClick"
          ref="tree"
          >
          <template slot-scope="{ node, data }">
            <span :style="{
              color:data.collect ?'':data.className=='FactoryStation'?'#999':'',
              'font-size':data.collect ?'':data.className=='FactoryStation'?'14px':''}">
                           <img
              :src="'data:image/png;base64,' + data.iconBase64"
              style="
                width: 16px;
                height: 16px;
                margin-right: 5px;
                vertical-align: bottom;"/> {{ node.label }}</span>
          </template>
        </el-tree>
      </div>
    </div>
    <!-- dialog弹框 -->
    <div><el-dialog
                      title=""
                      :visible.sync="dialogVisible"
                      :append-to-body="true"
                      width="75%">
                      <div>
                        <div style="display: flex;justify-content: space-between;padding-bottom: 20px;margin-bottom: 20px;border-bottom: 1px solid #ccc;">
                          <div style="color: black;">实时曲线</div>
                          <div>
                            <span style="cursor: pointer;" @click="dialogVisible=false"><i class="el-icon-close"></i></span>
                          </div>
                        </div>
                        <div style="margin-bottom: 20px;border-bottom: 1px solid #ccc;padding-bottom: 10px;">
                          <div style="position: relative;width: 100%;">
                            <el-radio v-model="radio1" @change="change" v-for="(item,index) in flexlist.slice(0,6)" :key="item.itemTag"
                             :label="item.itemTag" border size="small">{{ item.itemName }} {{ item.displayValue }} {{ item.dataUnit?(item.dataUnit):'' }}
                            </el-radio>
                            <template >
                              <span v-show="isshows">
                                <el-radio v-model="radio1" @change="change" v-for="(item,index) in flexlist.slice(6)" :key="item.itemTag"
                                :label="item.itemTag" border size="small">{{ item.itemName }} {{ item.displayValue }} {{ item.dataUnit?(item.dataUnit):'' }}
                                </el-radio>
                              </span>
                            </template>
                            <span style="position: absolute;right: 0;bottom: 15px;margin-right: 5px;cursor: pointer;
                            background-color: #1a90fe;color: #fff;border-radius: 3px;">
                              <i v-if="!isshows" @click="isshows=!isshows" class="el-icon-arrow-down"></i>
                              <i v-else @click="isshows=!isshows" class="el-icon-arrow-up"></i>
                            </span>
                          </div>

                        </div>
                        <div>
                          <span>周期类型</span>
                           <span>
                            <el-select v-model="form.alarmLevel" style="width: 125px;margin: 0 15px 0 15px;" size="small" @change="changeday">
                                <el-option label="15分钟曲线" value="10" class="option"></el-option>
                                <el-option label="日" value="20" class="option"></el-option>
                                <el-option label="月" value="30" class="option"></el-option>
                                <el-option label="实时曲线" value="40" class="option"></el-option>
                            </el-select>
                          </span>
                          <span>时间</span>
                          <span v-if="form.alarmLevel!=='20'&&form.alarmLevel!=='30'">
                            <el-date-picker
                            size="small"
                            @change="changetime"
                            style="width: 400px;margin-left: 15px;"
                                v-model="pickertime"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                end-placeholder="结束日期">
                              </el-date-picker>
                          </span>
                          <span v-else-if="form.alarmLevel=='20'">
                            <el-date-picker
                            size="small"
                            @change="changedaytime"
                            value-format="yyyy-MM-dd"
                            style="width: 200px;margin-left: 15px;"
                              v-model="dayvalue"
                              type="date"
                              placeholder="选择日期">
                            </el-date-picker>
                          </span>
                          <span v-else-if="form.alarmLevel=='30'">
                            <el-date-picker
                            size="small"
                            @change="changemonth"
                            value-format="yyyy-MM"
                            style="width: 200px;margin-left: 15px;"
                              v-model="monthvalue"
                              type="month"
                              placeholder="选择月">
                            </el-date-picker>
                          </span>
                        </div>
                        <div ref="tanbutan" id="tanbutan" style="height: 500px;" >
                        </div>
                      </div>
      </el-dialog></div>
    <!-- 右侧盒子 -->
    <div class="rightbox">
      <div style="height: 100% !important;">
        <div style="font-size: 18px; font-weight: 600;">{{ name }}</div>
        <template>
          <!-- 导航栏切换 -->
          <el-empty v-if="taberlist.length==0" description="暂无数据" :image-size="300"></el-empty>
          <el-tabs v-else v-model="activeName" @tab-click="handleClick">
            <el-tab-pane v-for="(item,index) in taberlist" :key="index" :label="item.groupName" :name="item.groupName" >
              <div style="display: flex;justify-content: space-between;">
                <div class="input" >
                 <div >
                  <!-- 输入框检索 -->
                   <el-input style="width: 100%;height: 34px;" v-model="input" size="small " placeholder="请输入属性名称或者标识符"></el-input>
                  </div>
                  <span class="spanicon" @click="chaxun"><i class="el-icon-search"></i></span>
                  <span class="spantiao">
                    <!-- table/bar切换 -->
                    <i class="el-icon-menu bgc" :class="{fff:isfff}" @click="qieicon('flex')" style=" cursor: pointer;"> </i>
                    <i class="el-icon-s-operation bgc" :class="{fff:!isfff}" @click="qieicon('table')" style=" cursor: pointer;"></i>
                  </span>
               </div>
               <div>
                <el-tooltip class="item" effect="dark" content="历史曲线" placement="top">
                  <img @click="chicklist('history')" style="width: 32px;cursor: pointer;
                   height: 32px;" src="../../assets/bianyaqi/asseta/lishiqux.png" alt="">
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="数据列表" placement="top">
                  <img @click="chicklist('shujuliebiao')" style="width: 32px;margin: 0 10px;cursor: pointer;
                  height: 32px;" src="../../assets//bianyaqi//asseta/shujuliebiao.png" alt="">
                </el-tooltip>

               </div>
              </div>
                  <div class="table" v-show="ishistory=='jiankong'">
                    <!-- navbar类型 -->
                     <div class="littlebox" v-if="isshow" v-loading="loading">
                       <!-- <div style="display: flex;flex-flow:wrap;overflow: hidden;
                       overflow: auto; height: 100%;width: 100%;"> -->
                        <div class="little" v-for="(item,index) in flexlist" :key="index" style="width: 24.1%;">
                         <div class="title">
                          <!-- <span></span> -->
                          <span><img
                            v-show="item.itemImage"
                            style="width: 24px;
                            vertical-align: middle;
                            margin-right: 5px;
                            height: 24px;"
                            :src="'data:image/png;base64,' + item.itemImage"
                            alt=""
                          /><span>{{ item.itemName }}</span> </span>
                          <button @click="chakan(item)"> <i class="el-icon-view"></i> 查看数据</button>
                         </div>
                         <div class="number">{{ item.displayValue }} {{ item.dataUnit?(item.dataUnit):'' }}</div>
                         <div class="time">{{ item.dataTime }}</div>
                       <!-- </div> -->
                       </div>
                     </div>
                     <!-- 表格类型 -->
                     <div v-else>
                      <template>
                      <el-table
                        :data="flexlist"
                        v-loading="loading"
                        :header-cell-style="{background:'#f5f5f5'}"
                        height="750"
                        style="width:100%">
                        <el-table-column
                          prop="itemTag"
                          label="属性标识符"
                          width="180">
                        </el-table-column>
                        <el-table-column
                          prop="itemName"
                          label="属性名称"
                          width="180">
                        </el-table-column>
                        <el-table-column
                          prop="dataTime"
                          label="更新时间">
                        </el-table-column>
                        <el-table-column
                          prop="displayValue"
                          label="最新值"
                          width="180">
                        </el-table-column>
                        <el-table-column
                          prop="dataUnit"
                          label="数据单位"
                          width="180">
                        </el-table-column>
                        <el-table-column
                          label="操作" #default="{row}">
                          <template>
                            <el-button type="text" size="small" @click="chakan(row)">查看数据</el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </template>
                     </div>
                    </div>
                    <div class="history" v-show="ishistory=='history'">
                        <HistoryTrends ref="lishiqushi"></HistoryTrends>
                    </div>
                    <div class="history" v-show="ishistory=='shujuliebiao'">
                      <DeviceMonitor ref="shujuliebiao"></DeviceMonitor>
                    </div>
            </el-tab-pane>
          </el-tabs>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import DeviceMonitor from './devicemonitor.vue'
import HistoryTrends from './history.vue'
import * as echarts from 'echarts';
import { getgenjiedianapi, getzijidianapi, ceshijiekouapi, getquxianlist,getzongjianxianapi } from '../../api/monitor'
import {getKeywordListApi} from '@/api/Ledger'
export default {
  name: 'CallPoliceIndex',
  components: {
    HistoryTrends,
    DeviceMonitor
  },
  data() {
    return {
      isshows:false,
      radio1:'',
      form:{alarmLevel:'10',},
      props: {
        label: 'name',
        children: 'children',
        isLeaf: 'leaf'
      },
      filterText:'',
      activeName: '',
      taberlist: [],
      input: '',
      isfff: true,
      flexlist: [],
      isshow: true,
      label: '',
      falsttree: {},
      dialogVisible: false,
      itemtan: {},
      entityId:'',
      name: '',
      pickertime: [],
      timelist: [],
      xdatalist: [],
      dayvalue: '',
      monthvalue: '',
      timer: null,
      loading: false,
      array: [],
      ishistory: 'jiankong',
      valueindex:0
    };
  },
  async mounted() {
    const res = await getgenjiedianapi({ treeModel: 'DeviceManageTree' })
    this.falsttree=res.data.list[0]
    const ress = await getzijidianapi(res.data.list[0])
    if (ress.data.list[0].entityModelName == '用电单位') {
      const jinxian =await getzongjianxianapi({ orgNo: ress.data.list[0].companyNo })
      if (jinxian.data.entity.name) {
        this.name = jinxian.data.entity.name;
      this.entityId=jinxian.data.entity.id
        await this.getlist(jinxian.data.entity.id)
        this.setInterva(jinxian.data.entity.id)
      } else {
        this.name = ress.data.list[0].name;
      this.entityId=ress.data.list[0].entityId
      await this.getlist(ress.data.list[0].entityId)
       }
    } else {
      this.name = ress.data.list[0].name;
      this.entityId=ress.data.list[0].entityId
      await this.getlist(ress.data.list[0].entityId)
    }
    this.getfangfa()
    this.gettime()
  },

  methods: {
    // 切换历史曲线/数据列表
    chicklist(val) {
      if (val == 'history') {
        this.$refs.lishiqushi[this.valueindex].getmethods()
      } else if (val=='shujuliebiao') {
        this.$refs.shujuliebiao[this.valueindex].getmethods()
       }
       this.ishistory=val
    },
    // 单选框点击事件
    async change(val) {
      const res = await getquxianlist({ deviceId: this.entityId, },
        {
          itemTag: val,
          periodType: this.form.alarmLevel,
          startTime:this.form.alarmLevel=='20'?this.dayvalue :this.form.alarmLevel=='30'?this.monthvalue:this.pickertime[0],
          endTime: this.form.alarmLevel == '20' ?'':this.form.alarmLevel=='30'?'': this.pickertime[1]
        })
      this.xdatalist = []
        this.timelist=[]
      res.data.entity.itemPoints.forEach(ele => {
          this.xdatalist.push(ele.value)
          this.timelist.push(ele.time)
      })
      this.itemtan.itemName=this.flexlist.filter(ele=>ele.itemTag==val)[0].itemName
      this.getecharts()
    },
    //  获取当前时间错
    gettime() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const month = date.getMonth() + 1 // 月
      const day = date.getDate()<10?'0'+date.getDate():date.getDate()
      var hour = date.getHours(); // 时
      var minutes = date.getMinutes(); // 分
      var seconds = date.getSeconds()
      this.dayvalue = year + '-' + month + '-' + day
      this.monthvalue=year + '-' + month
      this.pickertime.unshift(year + '-' + month + '-' + day + ' ' + '00:00:00')
      this.pickertime.push(year + '-' + month + '-' + day+' '+hour+':'+ minutes+':'+ seconds)
    },
    // 封装方法
    getfangfa() {
      if(this.taberlist.length==0) return
      const arr = this.taberlist.filter(ele => ele.groupName == this.taberlist[0].groupName)
      this.flexlist = arr[0].itemDataViews
    },
    // 获取表格/tab数据
    async getlist(id) {
      this.loading=true
      const res= await ceshijiekouapi({deviceId:id})
      this.activeName = res.data.list[0]?.groupName
      this.taberlist = res.data.list
      // this.label=this.activeName
      this.loading=false
    },
    // 切换表格/tab
    qieicon(val) {
      this.isfff=!this.isfff
      this.isshow=!this.isshow
    },
        // 树节点搜索
        async querySearch (queryString, cb) {
      const res = await getKeywordListApi({ name: queryString })
      const restaurants = res.data.list
      cb(restaurants)
      // 调用 callback 返回建议列表的数据
    },
    // 搜索选择
    handleSelect (item) {
      const newarr=item.pathId.split(',')
      for (let i = 0;i<newarr.length;i++) {
        if (newarr[i]) {
          this.array.push(newarr[i])
        }
      }
      function getgaoliang(that) {
        let node = that.$refs.tree.getNode(item);
        if (node) {
          that.$refs.tree.setCurrentKey(item.id);
        } else {
          setTimeout(() => {
            getgaoliang(that)
          }, 500);
        }
        }
      getgaoliang(this)
        this.handleNodeClick(item)
    },
    // 设备树点击事件
    async handleNodeClick(val) {
      this.$store.commit('setmonitordata', val)
      this.label = ''
      clearInterval(this.timer);
      if (val.entityModelName == '用电单位') {
        const jinxian = await getzongjianxianapi({ orgNo: val.companyNo })
        if (jinxian.data.entity.name) {
          this.name = jinxian.data.entity.name.replace(/\[.*?\]|\(.*?\)/g, '');
        this.entityId=jinxian.data.entity.id
        await this.getlist(jinxian.data.entity.id)
        this.setInterva(jinxian.data.entity.id)
        } else {
          this.name = val.name.replace(/\[.*?\]|\(.*?\)/g, '');
        this.entityId=val.entityId
        await this.getlist(val.id)
        this.setInterva(val.id)
        }
      } else {
        this.name = val.name.replace(/\[.*?\]|\(.*?\)/g, '');
        this.entityId=val.entityId
        await this.getlist(val.id)
        this.setInterva(val.id)
      }
      this.getfangfa()
      // ----
      if (this.taberlist.length == 0) return
      if (this.ishistory == 'history') {
        this.$refs.lishiqushi[this.valueindex].getmethods()
      } else if (this.ishistory == 'shujuliebiao') {
        this.$refs.shujuliebiao[this.valueindex].getmethods()
       }

    },
    // tablebar切换
    handleClick(val) {
      this.valueindex = val.index
      this.ishistory='jiankong'
      this.label = val.label
      const arr = this.taberlist.filter(ele => ele.groupName == val.label)
     this.flexlist=arr[0].itemDataViews
    },
    // 输入框迷糊搜索
    chaxun() {
      this.flexlist=this.flexlist.filter(ele=>ele.itemName.indexOf(this.input)!==-1)
    },
        // dialog打开
    chakan(item) {
      this.radio1=this.flexlist.filter(ele=>ele.itemTag==item.itemTag)[0].itemTag
      this.itemtan=item
      this.dialogVisible = true
      this.$nextTick(async () => {
        //  执行echarts方法
        const res = await getquxianlist({ deviceId: this.entityId, },
          { itemTag: item.itemTag, periodType: this.form.alarmLevel, startTime: this.pickertime[0], endTime: this.pickertime[1] })
        this.xdatalist = []
        this.timelist=[]
        res.data.entity.itemPoints.forEach(ele => {
          this.xdatalist.push(ele.value)
          this.timelist.push(ele.time)
        })
        this.getecharts()
      })
    },
    // 切换类型
    async changeday(val) {
      this.val = val
      console.log(this.dayvalue,this.monthvalue);
      const res = await getquxianlist({ deviceId: this.entityId },
        {
          itemTag: this.radio1,
          periodType: val,
          startTime:val=='20'?this.dayvalue :val=='30'?this.monthvalue:this.pickertime[0],
          endTime: val == '20' ?'':val=='30'?'': this.pickertime[1]
        })
      this.xdatalist = []
        this.timelist=[]
      res.data.entity.itemPoints.forEach(ele => {
          this.xdatalist.push(ele.value)
          this.timelist.push(ele.time)
      })
      this.itemtan.itemName=this.flexlist.filter(ele=>ele.itemTag==this.radio1)[0].itemName
      this.getecharts()
    },
    // 切换时间
    async changetime(val) {
      const res = await getquxianlist({ deviceId: this.entityId, },
        {
          itemTag: this.radio1,
          periodType: this.form.alarmLevel,
          startTime:  this.form.alarmLevel=='20'?this.dayvalue : this.form.alarmLevel=='30'?this.monthvalue:val[0],
          endTime:this.form.alarmLevel=='20'?'':this.form.alarmLevel=='30'?'': val[1],
        })
      this.xdatalist = []
        this.timelist=[]
      res.data.entity.itemPoints.forEach(ele => {
          this.xdatalist.push(ele.value)
          this.timelist.push(ele.time)
      })
      this.itemtan.itemName=this.flexlist.filter(ele=>ele.itemTag==this.radio1)[0].itemName
      this.getecharts()
    },
    async changedaytime(val) {
      console.log(val);
      const res = await getquxianlist({ deviceId: this.entityId, },
        {
          itemTag: this.radio1,
          periodType: this.form.alarmLevel,
          startTime:  val,
          endTime:'',
        })
      this.xdatalist = []
        this.timelist=[]
      res.data.entity.itemPoints.forEach(ele => {
          this.xdatalist.push(ele.value)
          this.timelist.push(ele.time)
      })
      this.itemtan.itemName=this.flexlist.filter(ele=>ele.itemTag==this.radio1)[0].itemName
      this.getecharts()
    },
    async changemonth(val) {
      console.log(val);
      const res = await getquxianlist({ deviceId: this.entityId, },
        {
          itemTag: this.radio1,
          periodType: this.form.alarmLevel,
          startTime:  val,
          endTime:'',
        })
      this.xdatalist = []
        this.timelist=[]
      res.data.entity.itemPoints.forEach(ele => {
          this.xdatalist.push(ele.value)
          this.timelist.push(ele.time)
      })
      this.itemtan.itemName=this.flexlist.filter(ele=>ele.itemTag==this.radio1)[0].itemName
      this.getecharts()
    },
    // 设备树懒加载
    async loadNode (node, resolve) {
      const res = await getgenjiedianapi({ treeModel: 'DeviceManageTree' })
      // const res = await getzijidianapi()
      const ress = await getzijidianapi(res.data.list[0])
      if (node.level === 0) { // 初始的级数（最顶层）
        this.$store.commit('setmonitordata', ress.data.list[0])
        return resolve(ress.data.list) // 最顶层数据渲染为region
      }
      if (node.level === 1) {
        const ress = await getzijidianapi(node.data)
        return resolve(ress.data.list)
      } else if (node.level === 2) {
        const ress = await getzijidianapi(node.data)
        return resolve(ress.data.list)
      } else if (node.level === 3) {
        const ress = await getzijidianapi(node.data)
        return resolve(ress.data.list)
      } else if (node.level === 4) {
        const ress = await getzijidianapi(node.data)
        return resolve(ress.data.list)
      } else if (node.level === 5) {
        const ress = await getzijidianapi(node.data)
        return resolve(ress.data.list)
      } else if (node.level === 6) {
        const ress = await getzijidianapi(node.data)
        return resolve(ress.data.list)
      }
    },
    getecharts() {
      var chartDom = this.$refs.tanbutan
      var myChart = echarts.init(chartDom);
      var option;
      // 原型可放大缩小图
      // option = {
      //     xAxis: {
      //       type: 'category',
      //       data: this.timelist
      //   },
      //   grid: {
      //     left: '5%',
      //     right: '5%',
      //   },
      //     yAxis: {
      //             axisLine:{show: true},
      //             splitLine: {
      //               //网格线
      //               lineStyle: {
      //                 type: 'dashed' //设置网格线类型 dotted：虚线   solid:实线
      //               },
      //               show: true //隐藏或显示
      //             },
      //             type: 'value'
      //           },
      //     tooltip: {
      //       trigger: 'axis'
      //     },
      //     toolbox: {
      //             feature: {
      //               saveAsImage: {}
      //             }
      //           },
      //     dataZoom: [
      //             {
      //               type: 'slider',
      //               xAxisIndex: 0,
      //               filterMode: 'none'
      //             },
      //             {
      //               type: 'slider',
      //               yAxisIndex: 0,
      //               filterMode: 'none'
      //             },
      //             {
      //               type: 'inside',
      //               xAxisIndex: 0,
      //               filterMode: 'none'
      //             },
      //             {
      //               type: 'inside',
      //               yAxisIndex: 0,
      //               filterMode: 'none'
      //             }
      //           ],
      //     series: [
      //       {
      //         data: this.xdatalist,
      //         type: 'line',
      //         smooth: true,
      //         markPoint: {
      //                 data: [
      //                   { type: 'max', itemStyle: { color: '#187cf5' },label:{color:'#fff'} },
      //                 ]
      //               },
      //               lineStyle: {
      //                 color: '#187cf5'
      //               },
      //               areaStyle: {
      //                 normal: {
      //                   //前四个参数代表位置 左下右上，如下表示从上往下渐变色 暗青色到亮青色，
      //                   color: new echarts.graphic.LinearGradient(
      //                     0, 0, 0, 1,
      //                     [
      //                       { offset: 0, color: '#c0d7ff' },
      //                       { offset: 1, color: '#fff' }
      //                     ]
      //                   )
      //                 }
      //               }
      //       }
      //     ]
      //   };
      // 第二次修改柱状图
      // option = {
      //   tooltip: {},
      //   xAxis: {
      //     data: this.timelist,
      //     splitLine: {
      //       show: false
      //     }
      //   },
      //   yAxis: {},
      //   series: [
      //     {
      //       name: 'bar',
      //       type: 'bar',
      //       data: this.xdatalist,
      //       emphasis: {
      //         focus: 'series'
      //       },
      //       animationDelay: function (idx) {
      //         return idx * 10;
      //       }
      //     },

      //   ],
      //   animationEasing: 'elasticOut',
      //   animationDelayUpdate: function (idx) {
      //     return idx * 5;
      //   }
      // };
      // 第三版本
      option = {
        tooltip: {
          trigger: 'axis'
        },
        // legend: {
        //   data: ['KW']
        // },
        grid: {
          left: '1%',
          right: '2%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.timelist
        },
        yAxis: {
          min: 'dataMin',
          max:'dataMax',
          axisLine:{show: true},
          splitLine: {
            //网格线
            lineStyle: {
              type: 'dashed' //设置网格线类型 dotted：虚线   solid:实线
            },
            show: true //隐藏或显示
          },
          type: 'value'
        },
        series: [
          {
            name:this.itemtan.itemName,
            type: 'line',
            smooth: true,
            symbol: 'none',
            markPoint: {
              data: [
                { type: 'max', itemStyle: { color: '#5996ff' },label:{color:'#fff',padding: [5, 10]} },
                { type: 'min', itemStyle: { color: '#5996ff' },label:{color:'#fff',padding: [5, 10]} }
              ]
            },
            data:this.xdatalist,
            lineStyle: {
              color: '#5996ff'
            },
            areaStyle: {
                      normal: {
                        //前四个参数代表位置 左下右上，如下表示从上往下渐变色 暗青色到亮青色，
                        color: new echarts.graphic.LinearGradient(
                          0, 0, 0, 1,
                          [
                            { offset: 0, color: '#c0d7ff' },
                            { offset: 1, color: '#fff' }
                          ]
                        )
                      }
                    }
          }
        ]
      };
        option && myChart.setOption(option);

    },
    // 定时器
    setInterva(id) {
      this.timer= setInterval(async () => {
        await this.getlist(id)
        this.getfangfa()
        if (this.label) {
          this.activeName = this.label
        }
        const arr = this.taberlist.filter(ele => ele.groupName == this.activeName)
        this.flexlist=arr[0]?.itemDataViews
      }, 10000);
    }
  },
  // 组件销毁，清除定时器
  beforeDestroy() {
    clearInterval(this.timer);
  },
  watch: {
    deep:true,
    filterText (newValue) {
      this.filterText = newValue.replace(/^\[(.*?)\]/, '').replace(/\((.*?)\)$/, '')
    },
    input(val) {
      if (val) {
        if (!this.label) {
          this.getfangfa()
        } else {
          const arr = this.taberlist.filter(ele => ele.groupName == this.label)
         this.flexlist=arr[0].itemDataViews
        }
        }
      }
    },
};
</script>

<style lang="scss" scoped>
 *{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
 }
 .bigbox{
  // background-color: #f1f1f1;
  padding: 10px;
  display: flex;
  height: 100% !important;
  .leftbox{
    // display: none;
    padding: 15px;
    background-color: #fff;
    width: 300px;
    height: 100%;
    margin-right: 10px;
    .treebox{
  margin-top:10px;
width:100%;
height:calc(100% - 55px);
  // border:1px solid #ccc;
  overflow: hidden;
  overflow-y: auto;
}
  }
  .rightbox{
    // flex: 1;
    // width: calc(100% - 310px);
    // width: 70%;
    height: 100% !important;
    width: calc(100% - 310px) !important;
    background-color: #fff;
    padding: 20px;
    .history{
      height: 95%;
      width: 100%;
    }
    .table{
      margin-top: 10px;
       height:95% !important;
      //  width: calc(100% - 350px);
      width: 100%;
      .littlebox{
        display: flex;
        flex-wrap: wrap;
        // justify-content: flex-start;
        // justify-content: space-around;
        align-content: flex-start;
        overflow: hidden;
        overflow: auto;
        height: 100%;
        //width: 100%;
        .little{
        // width: 32%;
        flex-shrink: 0;
        height: 123px;
        padding: 15px;
        flex-shrink: 0;
        border: 1px solid #ccc;
        border-radius: 3px;
        margin-bottom: 10px;
        margin-right: 10px;
                .title{
          display: flex;
          justify-content: space-between;
          padding-bottom: 10px;
          border-bottom: 1px solid #ccc;
          button{
            color: #2194ff;
            border: none;
            background-color: #fff;
          }
        }
        .number{
          font-size: 20px;
          font-weight: 700;
          margin: 8px 0;
        }
        .time{
          font-size: 14px;
          color: #999;
        }
      }
      }

    }
    .input{
      height: 34px;
      display: flex;
      justify-content: left;
      .spanicon{
      display: inline-block;
      width: 32px;
      height: 32px;
      border: 1px solid #ccc;
      text-align: center;
      line-height: 32px;
    }
    .spantiao{
      width: 76px;
      height: 32px;
      background-color: #f1f1f1;
      margin-left: 10px;
      text-align: center;
      // line-height: 32px;
      // padding: 2px;
      padding-top: 2px;
      .bgc{
        width: 36px;
        height: 28px;
        line-height: 28px;
      }
      .fff{
        background-color: #fff;
      }
    }
    }
  }
 }
 ::v-deep .el-input__inner{
  border-radius: 0px !important;
 }
 ::v-deep .el-tabs--top{
  height: 95% !important;
 }
 ::v-deep .el-tabs__content{
  height: 95% !important;
 }
 ::v-deep .el-tab-pane{
  height: 100% !important;
 }
 ::v-deep .el-dialog__header{
  display: none;
}
.option{
  padding-left: 10px;
}
::v-deep .el-tree-node__content {
  font-size: 14px; /* 修改为你想要的字体大小 */
}
::v-deep .el-radio{
  width: 15%;
  margin-left: 0 !important;
  margin-right: 10px;
  margin-bottom: 5px;
}
::v-deep .el-radio__label{
  display: inline-block;
  width: 94% !important;
  white-space: nowrap !important;
 overflow: hidden !important;
 text-overflow: ellipsis !important;
}
::v-deep .el-tree-node.is-current > .el-tree-node__content {
  background-color: #bae7ff !important;
}
::v-deep .el-tree-node__content{
  &:hover{
    background-color: #f0f7ff;
  }
}
</style>
